<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>images</title>
	<!-- html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来 -->
	<script src="js/html2canvas.min.js"></script>

	<!-- 将canvas图片保存成图片 -->
	<script src="js/canvas2image.js"></script>
	<script src="js/base64.js"></script>
	<style>
		#content{
			border-radius: 3px;
		}
		.myword{
			color: green;
			border: 1px solid gray;
			border-radius: 3px;
			text-align: center;
			margin-left: 26px;
			margin-top: 10px;
			float: left;
			padding: 5px;
		}
		.ah{
			display: block;
			text-align: center;
			color: #666;
		}
		#btnSave,#Download{
			margin: 10px 0 10px 26px;
		}
		.tx,.bt{
			border: 1px solid #999;
			width: 100px;
			height: 20px;
			margin-left: 26px;
			margin-bottom: 10px;
			border-radius: 3px;
		}
		.bt{
			background-color: #333;
			color: #fff;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id=content style="width:150px;height:200px;border:1px gray solid">
	    <span class="myword">Hello world</span>
	    <br>
	    <span class="ah"><h2>这里是文本</h2></span>
	    <input type="text" class="tx">
		<br />
	    <input type="button" class="bt" value="提交">
	</div>
	<button id="btnSave">转换成图片</button>
	<div id="images"></div>
	<button id="Download">Download</button>
</body>
<script>
/*生成canvas图形*/

// 获取按钮id
var btnSave = document.getElementById("btnSave");
// 获取内容id
var content = document.getElementById("content");
// 进行canvas生成
btnSave.onclick = function(){
	html2canvas(content, {
        onrendered: function(canvas) {
        	//添加属性
        	canvas.setAttribute('id','thecanvas');
			//读取属性值
			// var value= canvas.getAttribute('id');
            document.getElementById('images').appendChild(canvas);
        }
	});
}
</script>
<script>
/*
 * 说明
 * html2canvas，目前该插件还在开发中，暂不支持带有图片的div转换。图片会被忽略
 * 对一些的默认样式的支持可能不那么尽如人意，建议自己定义样式,
 * 不支持iframe
 * 不支持跨域图片
 * 不能在浏览器插件中使用
 * 部分浏览器上不支持SVG图片
 * 不支持Flash
 * 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试
 */
var Download = document.getElementById("Download");
Download.onclick = function(){
	var oCanvas = document.getElementById("thecanvas");

	/*自动保存为png*/
	// 获取图片资源
	var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
	saveFile(img_data1, 'abc');


	/*下面的为原生的保存，不带格式名*/
	// 这将会提示用户保存PNG图片
	// Canvas2Image.saveAsPNG(oCanvas);
}
// 保存文件函数
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>
</html>